import * as React from "react";
import classNames from "classnames/bind";
import * as styles from "./app-view.css";
import { didUpdated, getAppState } from "../../core/app-state";
import { MenuBar } from "../menus-view/menus-view";
import { ControlsView } from "../controls-view/controls-view";
import { FileExplorerView } from "../file-explorer-view/file-explorer-view";
import { EditorsView } from "../editors-view/editors-view";
import { StatusView } from "../status-view/status-view";
import { FrameResizeBar } from "../frame-resize-bar/frame-resize-bar";

const cx = classNames.bind(styles);

export function AppView () {
  const [ _, setVersion ] = React.useState(0);
  React.useEffect(() => {
    let version = 0;
    didUpdated(() => {
      version++;
      setVersion(version);
    });
  }, []);

  const appState = getAppState();
  const { windowState, menusState, filesState, editorsState, frameState } = appState;

  React.useEffect(() => {
    const event = new CustomEvent('app-frame-resize');
    window.dispatchEvent(event);
  }, [frameState.leftWidth]);

  return (
    <>
      <div className={cx('app-frame', { 'is-maximize': windowState.isMaximize })}>
        <div className={cx('app-frame-header')}>
          <div className={cx('app-menu-bar')}><MenuBar menusState={ menusState } /></div>
          <div className={cx('app-controls')}><ControlsView winState={ windowState } /></div>
        </div>
        <div className={cx('app-frame-body')}>
          <div className={cx('app-frame-body-left')} style={{width: frameState.leftWidth}}>
            <FileExplorerView filesState={ filesState } />
          </div>
          <FrameResizeBar />
          <div className={cx('app-frame-body-center')}>
            <EditorsView editorsState={ editorsState } />
          </div>
        </div>
        <div className={cx('app-frame-footer')}>
          <StatusView editorsState={ editorsState } />
        </div>
      </div>
      <div className={cx('app-frame-outside')}>
      </div>
    </>
  );
}